<template>
  <a-modal
    v-model:open="modalOpen"
    width="40%"
    centered
    :title="title"
    :footer="null"
    @cancel="handleCloseDialog"
  >
    <a-form
      ref="formRef"
      class="form"
      :model="formData"
      :label-col="{ span: 3 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-form-item
        ref="contactUserName"
        label="收件人"
        name="contactUserName"
        :rules="[{ required: true, message: '输入收件人姓名' }]"
      >
        <a-input
          :bordered="false"
          class="h-form-input"
          placeholder="输入收件人姓名"
          v-model:value="formData.contactUserName"
        />
      </a-form-item>
      <a-form-item
        ref="contactMobile"
        label="联系电话"
        name="contactMobile"
        :rules="[{ required: true, message: '输入联系电话' }]"
      >
        <a-input
          :bordered="false"
          class="h-form-input"
          placeholder="输入联系电话"
          v-model:value="formData.contactMobile"
        />
      </a-form-item>
      <a-form-item
        ref="cityStr"
        label="收货地址"
        name="cityStr"
        :rules="[{ required: true, message: '选择收货地址' }]"
      >
        <a-input
          :bordered="false"
          class="h-form-input"
          placeholder="选择收货地址"
          @click="handleShowMap"
          v-model:value="formData.addressDetail"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 9, span: 4 }">
        <div class="btns center">
          <a-space>
            <a-button @click="handleCloseDialog">取消</a-button>
            <a-button type="primary" @click="handleSubmit">确定</a-button>
          </a-space>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal
    v-model:open="mapShow"
    width="40%"
    centered
    title="选择地址"
    :footer="null"
  >
    <baidu-map
      class="map"
      ak="njkiSrCHZkXEPY5DBMffRpx5KCES4CTN"
      v="3.0"
      type="API"
      :center="center"
      :scroll-wheel-zoom="true"
      :zoom="15"
      style="height: 400px; width: 100%; margin-top: 30px"
      @ready="handler"
      @click="getLocation"
    >
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      <bm-marker :position="{ lng: center.lng, lat: center.lat }">
        <bm-label
          content=""
          :labelStyle="{ color: 'red', fontSize: '24px' }"
          :offset="{ width: -35, height: 30 }"
        />
      </bm-marker>
      <div
        style="
          display: flex;
          justify-content: center;
          margin: 0;
          position: absolute;
          top: 50px;
        "
      >
        <a-input
          v-model:value="searchJingwei"
          placeholder="请输入你要选择的地址"
        />
        <a-button type="primary" @click="getBaiduMapPoint">搜索</a-button>
      </div>
    </baidu-map>
  </a-modal>
</template>
<script setup>
import { nextTick, ref } from "vue";
import { message } from "ant-design-vue";
import { saveRecAddr } from "@/api/sysConfig";
import {
  BaiduMap,
  BmAutoComplete,
  BmGeolocation,
  BmMarker,
  BmLabel,
} from "vue-baidu-map-3x";
const modalOpen = ref(false);
const title = ref(undefined);
const formData = ref({});
const open = (titles, record) => {
  title.value = titles;
  modalOpen.value = true;
  nextTick(() => {
    formData.value = Object.assign({}, record);
    formRef.value.resetFields();
  });
};
const mapShow = ref(false);
const formRef = ref();
const center = ref({
  lng: 104.071533,
  lat: 30.604682,
});
const BMaps = ref(null);
const maps = ref(null);
function handler({ BMap, map }) {
  BMaps.value = BMap;
  maps.value = map;
}
const searchJingwei = ref("");
const getLocation = (e) => {
  center.value.lat = e.point.lat;
  center.value.lng = e.point.lng;
  let myGeo = new BMaps.value.Geocoder();
  //逆地址解析
  myGeo.getLocation(e.point, function (point) {
    const addressComponents = point.addressComponents;
    formData.value.cityStr =
      addressComponents.province +
      "-" +
      addressComponents.city +
      "-" +
      addressComponents.district;
      formData.value.addressDetail = point.address;
    mapShow.value = false;
  });
};
function getBaiduMapPoint() {
  let myGeo = new BMaps.value.Geocoder();
  //逆地址解析
  myGeo.getPoint(searchJingwei.value, function (point) {
    if (point) {
      maps.value.centerAndZoom(point, 15);
      center.value.lat = point.lat;
      center.value.lng = point.lng;
    }
  });
}
function handleShowMap() {
  mapShow.value = true;
}
const emits = defineEmits(["refreshList"]);
const handleSubmit = async () => {
  const result = await saveRecAddr(formData.value);
  if (result.code == 200) {
    message.info("成功");
    modalOpen.value = false;
    emits("refreshList");
  }
};
const handleCloseDialog = () => {
  modalOpen.value = false;
};
defineExpose({ modalOpen, open });
</script>
<style scoped lang="less">
.form {
  margin-top: 24px;
}
.content {
  background: #f4f6f8;
  border-radius: 8px;
  margin-top: 20px;
  min-height: 200px;
  margin-bottom: 40px;
}
.h-form-input {
  background-color: #f3f5f7;
}
</style>
